<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--vue-->
    <script src="/js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/css/index.css">
    <!-- 引入组件库 -->
    <script src="/js/index.js"></script>
    <!--axios-->
    <script src="/js/axios.min.js"></script>

    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
        }
        .avatar {
            width: 100px;
            height: 100px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app">
    <el-row>
        <el-col :span="3">&nbsp;</el-col>
        <el-col :span="3">
            <el-input v-model="userid" size="mini" placeholder="请输工号"></el-input>
        </el-col>
        <el-col :span="3">
            <el-input v-model="username" size="mini" placeholder="请输姓名"></el-input>
        </el-col>
        <el-col :span="3">
            <el-button type="primary" size="mini" @click="search()" icon="el-icon-search">搜索</el-button>
        </el-col>
        <el-col :span="3">
            <el-button type="primary" size="mini" @click="flush()" icon="el-icon-search">刷新</el-button>
        </el-col>
    </el-row>
    <el-row>
        <el-table
                :data="tableData"
                style="width:100%">
            <el-table-column
                    prop="userid"
                    label="工号">
            </el-table-column>
            <el-table-column
                    prop="username"
                    label="姓名">
            </el-table-column>
            <el-table-column
                    prop="sex"
                    label="房间号">
            </el-table-column>
            <el-table-column
                    prop="islock"
                    label="入住意向"
                    :formatter="stateFormat"
            >
            </el-table-column>
            <el-table-column label="操作"  width="250">
                <template slot-scope="scope">
                    <el-button type="primary" @click="updateIslock(scope.$index, scope.row)">修改意向</el-button>
                    <el-button type="primary" @click="toEdit(scope.$index, scope.row)">入住</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-row>
    <el-row>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[2,3,5,10,100, 200, 300, 400]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </el-row>

    <el-row>
        <el-dialog title="更换宿舍" :visible.sync="addFormVisible" width="50%">
            <el-form :model="form">
                <el-form-item label="工号" :label-width="formLabelWidth">
                    <el-input v-model="form.userid" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="form.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="性别" :label-width="formLabelWidth">
                    <el-input v-model="form.sex" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="楼层" :label-width="formLabelWidth">
                    <el-select v-model="form.floor" placeholder="请选择" @change="getRoom(form)" >
                        <el-option v-for="f in floor" :label="f.FLOOR" :value="f.FLOOR">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="房间号" :label-width="formLabelWidth" >
                    <el-select v-model="form.room" placeholder="请选择">
                        <el-option v-for="r in room" :label="r.ROOM" :value="r.ROOM">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="add()">确 定</el-button>
            </div>
        </el-dialog>

    </el-row>
</div>

<script>
    var vue = new Vue({
        el:'#app',
        data:{
            tableData:[],
            currentPage:1,
            pageSize:5,
            total:20,
            userid:'',
            username:'',
            ecic:[],
            sex:'',
            addFormVisible:false,
            form: {},//添加或者更新form
            formLabelWidth: "120px",
            floor:null,
            room:null,
        },
        created:function () {
            _this =this;
            //初始化数据，加载所有的角色
            axios.get('/ecic/empList',{
                params: {
                    pageNo:1,
                    pageSize:1000,
                }
            }).then(function (response) {
                _this.ecic=response.data.page;
            });
            this.loadData();
            axios.get('/user/getLoginSession')
                .then(function (response) {
                    _this.userInfo=response.data;
                });
        },
        methods:{
            //加载数据的方法
            loadData:function () {
                _this =this;
                //初始化数据
                axios.get('/ecic/empList', {
                    params: {
                        pageNo:this.currentPage,
                        pageSize:this.pageSize,
                        userid:this.userid,
                        username:this.username,
                    },
                })
                    .then(function (response) {
                        // handle success  处理成功，回调的方法
                        //console.log(response);
                        //赋值分页列表
                        _this.tableData = response.data.page;
                        //删除最后一页为空时，调到上一页
                        //alert(_this.tableData.length);
                        if(_this.tableData.length==0&&_this.currentPage!=1){
                            _this.currentPage=_this.currentPage-1;
                            _this.loadData();
                        }
                        //赋值总条数
                        _this.total = response.data.total;
                    })
                    .catch(function (error) {
                        // handle error 处理异常
                        //console.log(error);
                    })
                    .then(function () {
                        // always executed  总是执行  相当于finally
                    });
            },
            //每页数量发生变化时
            handleSizeChange:function (v) {
                this.pageSize=v;
                this.loadData();
            },
            //当前页数放生变化是
            handleCurrentChange:function (v) {
                this.currentPage=v;
                this.loadData();
            },
            stateFormat(row, column) {
                if (row.islock === 0) {
                    return '无意向'
                }
                if (row.islock === 1) {
                    return '有意向'
                }
            },
            flush() {
                //刷新当前页
                location.reload();
            },
            // 搜索方法
            search: function () {
                this.currentPage = 1;
                this.loadData();
            },
            updateIslock:function(index, row){
                _this = this;
                axios.post('/ecic/updateIng?userid='+row.userid).then(function (response) {
                    console.log(response);
                    if (response.status == 200) {
                        if (response.data > 0) {
                            //提示成功
                            _this.$message({
                                type: 'success',
                                message: '处理成功!'
                            });
                            //重新加载数据
                            _this.loadData();
                        }
                    }
                }).catch(function (error) {
                    console.log(error);
                    _this.$message.error("你错了。。。");
                });
            },
            toEdit:function (index, row) {
                this.form.avatar = '';
                //console.log(row);
                this.form = row;
                //根据性别查看楼层
                axios.get('/ecic/floorList',{
                    params: {
                        sex:row.sex,
                    },
                }).then(function (response) {
                    _this.floor=response.data;
                });
                this.addFormVisible=true;
            },
            //根据新楼层和性别查找有空位的房间
            getRoom:function (form) {
                //alert("大傻逼");
                //console.log(form);
                axios.get('/ecic/roomList',{
                    params: {
                        floor:form.floor,
                        sex:form.sex,
                        room:form.room,
                    },
                }).then(function (response) {
                    _this.room=response.data;
                });
            },
            add: function () {
                _this = this;
                this.avatar = '';
                alert(JSON.stringify(this.form));
                axios.post('/ecic/insert', this.form).then(function (response) {
                    console.log(response);
                    if (response.status == 200) {
                        //提示成功
                        _this.$message({
                            message: '恭喜你，添加成功',
                            type: 'success'
                        });

                        //关闭弹出框
                        _this.addFormVisible = false;
                        //重新加载数据
                        _this.loadData();
                        //清空form
                        _this.form = {};
                    }
                }).catch(function (error) {
                    console.log(error);
                    _this.$message.error("你错了。。。");
                });
                axios.post('/ecic/del',this.form).then(function (response) { });
            },
        }
    })
</script>
</body>
</html>